<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<script type="text/javascript" src="scripts/lib/jquery-1.7.2.js"></script>
<script type="text/javascript" src="scripts/lib/uuid.js"></script>
<script type="text/javascript" src="scripts/lib/communicator.js"></script>

<script type="text/javascript">
	$(document).ready(
			function() {
				var rightNow = new Date();

				setInterval(function() {
					rightNow = new Date();
					$("#lblClock").html(
							rightNow.toLocaleDateString() + " "
									+ rightNow.toLocaleTimeString());
				}, 1000);

				var comm = new Communicator();
				comm.onmessage = function(res) {
					$("#listConsole").append(
							$("<li></li>").html(
									"Server(" + rightNow.toLocaleTimeString()
											+ "): " + JSON.stringify(res)));
				};

				comm.onerror = function(jq, eType) {
					$("#listConsole").append(
							$("<li></li>").addClass("error").html(
									"Error(" + rightNow.toLocaleTimeString()
											+ "): " + eType + "<br>"
											+ JSON.stringify(jq)));
				};

				comm.onsend = function(req) {
					$("#listConsole").append(
							$("<li></li>").html(
									"Client(" + rightNow.toLocaleTimeString()
											+ "): " + JSON.stringify(req)));
				};

				comm.onkeepalive = function() {
					$("#listConsole").append(
							$("<li></li>").html(
									"Keepalive Request (" + rightNow.toLocaleTimeString()
											+ ")"));
				};

				comm.ontimeout = function(res) {
					$("#listConsole").append(
							$("<li></li>").html(
									"Timeout (" + rightNow.toLocaleTimeString()
											+ ")"));
				};

				$("#btnSingin").click(function() {
					comm.send('/do', {
						__XMLclass : "request",
						id : uuid.v4(),
						version : "1.0",
						__XMLchildren : [ {
							__XMLclass : "signInRequest",
							id : $("#txtGameId").val(),
							__XMLchildren : [ {
								__XMLclass : 'user',
								name : $("#txtName").val()
							} ]
						} ]
					});
				});

				$("#btnCreate").click(function() {
					comm.send('/do', {
						__XMLclass : "request",
						id : uuid.v4(),
						version : "1.0",
						__XMLchildren : [ {
							__XMLclass : "createRequest",
							type : "closed",
							question : "SOme Question???",
							numChoices : 3,
							numRounds : 3,
							__XMLchildren : [ {
								__XMLclass : "choice",
								value : "Wendy's",
								index : 0
							}, {
								__XMLclass : "choice",
								value : "asdfasdf",
								index : 1
							}, {
								__XMLclass : "choice",
								value : "fffff",
								index : 2
							}, {
								__XMLclass : "user",
								name : "John Manero"
							} ]
						} ]
					});
				});

				comm.start();
			});
</script>

<style type="text/css">
.error {
	color: red;
}

#header {
	position: fixed;
	display: block;
	width: 100%;
	height: 192px;
	background: white;
	z-index: 100;
	top: 0px;
	left: 0px;
}

#headPush {
	height: 200px;
}

ul {
	list-style: none;
}

li {
	border: solid 1px black;
}
</style>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Long Poll Tester</title>
</head>
<body>
	<div id="header">
		<h1>Long Poll Tester</h1>
		<div id="lblClock"></div>
		<div>
			<button id="btnCreate">Create Game</button>
		</div>
		<div>
			ID: <input type="text" id="txtGameId"> Name: <input
				type="text" id="txtName">
			<button id="btnSingin">Sign In</button>
		</div>
	</div>
	<div id="headPush"></div>
	<ul id="listConsole"></ul>
</body>
</html>